<template>
  <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
    <el-table-column fixed="right" label="Operations" width="120">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click="handleClick(scope.row)"
          >Detail</el-button
        >
        <el-button link type="primary" size="small">Edit</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="30%"
    :before-close="handleClose"
  >
    <span>This is a message</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import axios from 'axios'
import { setUncaughtExceptionCaptureCallback } from 'process'
const tableData = ref([])
const data = ref([])
const defaultProps = {
  children: 'children',
  label: 'label'
}
const searchForm = reactive({
  label: ''
})
const dialogVisible = ref(false)
const handleNodeClick = ({ label }) => {
  searchForm.label = label
  getList()
}
const handleClick = async (row) => {
  dialogVisible.value = true
  console.log('row', row)
  const { name, address } = row
  const params = {
    name,
    address
  }
  console.log('params', params)
  const treeList = await axios.get('/mock/tree', { params })
}

const getList = async () => {
  console.log('searchForm', searchForm)
  const result = await axios.get('/mock/list', { params: searchForm })
  console.log('result', result)
  tableData.value = result.data.data
}
onMounted(async () => {
  //获取人脸列表

  const treeList = await axios.get('/mock/tree')
  data.value = treeList.data.data
  console.log('treeList', treeList)
})
</script>
